<template>
  <el-header v-show="isVisitor || token">
    <yin-header></yin-header>
  </el-header>
  <el-main class="main">
    <router-view />
    <yin-current-play></yin-current-play>
    <yin-play-bar v-show="isVisitor || token"></yin-play-bar>
    <yin-scroll-top v-show="isVisitor || token"></yin-scroll-top>
    <yin-audio></yin-audio>
  </el-main>
  <!-- <div class="button-bar"></div> -->
</template>

<script lang="ts">
import { getCurrentInstance, defineComponent, computed } from "vue";
import YinHeader from "@/components/layouts/YinHeader.vue";
import YinCurrentPlay from "@/components/layouts/YinCurrentPlay.vue";
import YinPlayBar from "@/components/layouts/YinPlayBar.vue";
import YinScrollTop from "@/components/layouts/YinScrollTop.vue";
import YinAudio from "@/components/layouts/YinAudio.vue";

export default defineComponent({
  components: {
    YinHeader,
    YinCurrentPlay,
    YinPlayBar,
    YinScrollTop,
    YinAudio,
  },
  setup() {
    const { proxy } = getCurrentInstance();
    const isVisitor = computed(() => proxy.$store.getters.isVisitor);
    const token = computed(() => proxy.$store.getters.token);
    return {
      isVisitor,
      token,
    };
  },
});
// if (sessionStorage.getItem("dataStore")) {
//   proxy.$store.replaceState(
//     Object.assign(
//       {},
//       proxy.$store.state,
//       JSON.parse(sessionStorage.getItem("dataStore"))
//     )
//   );
// }

// window.addEventListener("beforeunload", () => {
//   sessionStorage.setItem("dataStore", JSON.stringify(proxy.$store.state));
// });
</script>

<style lang="scss" scoped>
@import "@/assets/css/var.scss";
@import "@/assets/css/global.scss";

.el-container {
  min-height: calc(100% - 60px);
}
.el-header {
  padding: 0;
}
.el-main {
  padding-left: 0;
  padding-right: 0;
}
.main {
  margin: 0px;
  padding: 0px;
  overflow-y: auto;
}
.main::-webkit-scrollbar {
  display: none;
}
.button-bar {
  height: 100px;
}
</style>
